<template>
 <li>
    <div  @click="toggle" class="it-top"> 
      <img v-if="isFolder && isOpen" :src="imminus"/>
      <img v-if="isFolder && !isOpen" :src="implus"/>
      <img v-if="!isFolder" :src="impage"/>
      {{ item.label }} 
    </div>
    <ul v-show="isOpen">
      <tree-item
        class="item"
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
      ></tree-item>
    </ul>
</li>
</template>
<script>
import implus from '@/assets/images/plus.gif';
import imminus from '@/assets/images/minus.gif';
import impage from '@/assets/images/page.png';

export default {
  name: "tree-item",
  props: {
    item: Object
  },
  data() {
    return {
       isOpen: false,
       implus,
       imminus,
       impage
    };
  },
  computed: {
    isFolder: function () {
      return this.item.children &&
        this.item.children.length>0
    }
  },
  created() {
    this.eventBus.$on('setexpand', (e) => {
      this.isOpen = e;
    })
  },
  methods: {
    toggle () {
      if (this.isFolder) {
        this.isOpen = !this.isOpen
      }
    }
  }
};
</script>